<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!--彈出框核心文件-->
    <script type="text/javascript" src="js/layer.js"></script>
    <link href="css/layer.css" type="text/css" rel="styleSheet" id="layermcss">
    <script type="text/javascript" src="js/pop.js"></script>
    <script type="text/javascript" src="js/jquery.toast.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/style.js"></script>
    <link rel="stylesheet" href="css/jquery.toast.min.css">
    <title>商品添加</title>
</head>
<body>
<div class="record-main">
    <div class="add-shop-title">
        <a href="" onclick="history.go(-1)"><i><img src="images/back-btn.png" width="20px" alt=""/></i>返回</a></div>
    <div class="xf-list-content shop-add">
        <form method="post" name="multiform" action="" enctype="multipart/form-data" onsubmit="return doSubmit()">
            <input type="hidden" name="menuPram" id="menuPram" />
            <div class="name">
                <span class="shop-add-span" style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189; width: 100px;">*</i>商品分類：</span>
                <select name="takeOutMenuType.id" id="typeId" class="form-control" >
                    <option value="">请选择商品分类</option>
                    <option value="">去芝士的茶(可退4元)</option>

                    <option value="">折扣</option>

                    <option value="">liangban</option>

                    <option value="">无敌水果茶</option>

                    <option value="">奶茶(升级版)</option>

                    <option value="">100%水果茶</option>

                    <option value="">升级版脱脂芝士奶盖</option>

                    <option value="">个月</option>

                    <option value="">热销</option>

                </select>
                <button type="button" class="btn btn-default" onclick="fenlei()" data-toggle="modal" style="margin-left: 20px; color: #00a189; border: 1px solid #00a189; outline: none;">添加分类</button>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>商品名稱：</span> <input type="text" class="form-control required" name="name" id="name" data-toggle="popover" data-placement="right" data-trigger="focus" data-content="建议名称不要超过15个字，超出部分建议录入到商品当中"maxlength="15" value="" />
            </div>
            <div class="name">
                <span style="width: 100px;">商品圖片：</span>
                <div class="form-group up-img">
                    <div class="album-old">
                        <div class="upload-btn btn-old">
                            <input type="file" name="picfile" id="picfile">
                        </div>
                        <div class="upload-img" id="upload-img"></div>
                        <span class="del-img del-btn" style="width: 20px; height: 20px;" onclick="delImg()"></span>
                    </div>
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>商品價格：</span>
                <div class="form-group">
                    <input type="number" id="price" onkeyup="replace(this);" name="price" min="0" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>庫存：</span>
                <div class="form-group">
                    <input type="number" onkeyup="replace(this);"  data-toggle="popover" data-placement="right" data-content="库存为无限时请填写-1" data-trigger="focus" name="stock" id="number" min="0" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <div style="float: left;clear: both">
                    <span style="width: 100px;margin-top: 7px;"><i class="add-star" style="margin-right: 5px; color: #00a189;">*</i>商品规格：</span>
                </div>
                <div class="form-group add-standard-list" style="position: relative">
                    <div class="standard-default">
                        <div class="standard-list" id="standard-default">
                            <div class="standard-box standard-stan">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>规格</span>
                                <p><input type="text" rel="popover" data-placement="bottom" data-placement="bottom"  maxlength="10" id="standard'+num+'"class="form-control"/></p>
                            </div>
                            <div class="standard-box standard-price">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>价格</span>
                                <p><input type="number" min="0" class="form-control"/></p>
                            </div>
                            <div class="standard-box standard-num">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>库存</span>
                                <p><input type="num" class="form-control" data-toggle="popover" data-placement="right" data-content="库存无限请填写-1" data-trigger="focus"/></p>
                            </div>
                            <div class="standard-box standard-meal-price">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒价格</span>
                                <p><input type="number" min="0" class="form-control"/></p>
                            </div>
                            <div class="standard-box standard-meal-number">
                                <span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒数量</span>
                                <p><input type="number" min="0" class="form-control"/></p>
                            </div>
                            <div class="del-standard-list"><a onclick="standardDel(this);" class="del-box del-btn"></a></div>
                        </div>
                    </div>
                    <div class="prepend-standard-show">

                    </div>
                    <div class="strandard-message" id="strandard-message">
                        <dl class="strandard-dl">
                            <dd class="strandard-dd" onclick="demo(this,3)">大份</dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                中份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                小份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                大
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                中
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                小
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                一份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                半份
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                6寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                8寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                9寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                10寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                12寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                14寸
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                超大杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                大杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                中杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                标准杯
                            </dd>
                            <dd class="strandard-dd" onclick="demo(this,3)">
                                小杯
                            </dd>
                        </dl>
                    </div>
                    <div class="add-property add-standard" id="addStandard">添加规格</div>
                </div>
            </div>
            <div class="name" style="clear: both">
                <div style="float: left;">
                    <span style="width: 100px;margin-top: 7px;">商品屬性：</span>
                </div>
                <div class="form-group add-property-list">
                    <div class="add-list"></div>
                    <div class="property-message">
                        <div class="message-box1 box1-list" style="margin-right: 10px; display: none">
                            <dl>
                                <dd>
                                    <a onclick="demo(this,1)" id="change1">溫度</a> <a onclick="demo(this,1)" id="change2">冷热</a> <a onclick="demo(this,1)" id="change3">辣度</a> <a onclick="demo(this,1)" id="change4">口味</a>
                                </dd>
                                <dd style="margin-top: 15px;">
                                    <a onclick="demo(this,1)" id="change5">甜度</a> <a onclick="demo(this,1)" id="change6">加料</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="message-box1 message-box2 box2_list" style="background-color: white">
                            <div class="box2_list1  " style="padding: 10px 0;">
                                <dl>
                                    <dd>
                                        <a onclick="demo(this,2)">热</a> <a onclick="demo(this,2)">常温</a> <a onclick="demo(this,2)">去冰</a> <a onclick="demo(this,2)">少冰</a>
                                    </dd>
                                </dl>
                            </div>
                            <div class="box2_list2 " style="padding: 10px 0;">
                                <dl>
                                    <dd>
                                        <a onclick="demo(this,2)">热</a> <a onclick="demo(this,2)">常温</a> <a onclick="demo(this,2)">去冰</a> <a onclick="demo(this,2)">少冰</a>
                                    </dd>
                                </dl>
                            </div>
                            <div class="box2_list3 " style="padding: 10px 0;">
                                <dl>
                                    <dd>
                                        <a onclick="demo(this,2)">特辣</a> <a onclick="demo(this,2)">麻辣</a> <a onclick="demo(this,2)">中辣</a> <a onclick="demo(this,2)">微辣</a>
                                    </dd>
                                </dl>
                            </div>
                            <div class="box2_list4" style="height: 65px;">
                                <dl>
                                    <dd>
                                        <a onclick="demo(this,2)">特辣</a> <a onclick="demo(this,2)">麻辣</a> <a onclick="demo(this,2)">中辣</a> <a onclick="demo(this,2)">微辣</a>
                                    </dd>
                                    <dd style="margin-top: 15px; margin-bottom: 10px;">
                                        <a onclick="demo(this,2)">微微辣</a> <a onclick="demo(this,2)">清淡</a> <a onclick="demo(this,2)">少盐</a>
                                    </dd>
                                </dl>
                            </div>
                            <div class="box2_list5 " style="padding: 10px 0;">
                                <dl>
                                    <dd>
                                        <a onclick="demo(this,2)">无糖</a> <a onclick="demo(this,2)">少糖</a> <a onclick="demo(this,2)">半糖</a> <a onclick="demo(this,2)">多糖</a>
                                    </dd>
                                </dl>
                            </div>
                            <div class="box2_list6 " style="padding: 10px 0;">
                                <dl>
                                    <dd>
                                        <a onclick="demo(this,2)">珍珠</a> <a onclick="demo(this,2)">椰果</a> <a onclick="demo(this,2)">波霸</a> <a onclick="demo(this,2)">红豆</a>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <!--  <div class="property" style="display: none; margin-top: 10px; height: 40px;">
                        <input type="text" id="property" name="property" value=""
                            style="float: left;" class="sure-pwd form-control required"
                            placeholder="例如：温度" onfocus="showproperty()" oninput="che" />
                        <input type="text" id="propertyPram" name="propertyPram" value=""
                            class="sure-pwd form-control required"
                            style="margin-left: 10px;" placeholder="例如二：口味" />
                        <a href="javascript:void(0);" class="del-box del-btn"
                            onclick="$(this).closest('.property').remove();"></a>
                    </div>
                    <div class="pro-box">
                        <div class="property-box">
                            <a onclick="demo(this,1)">溫度</a> <a onclick="demo(this,1)">冷熱</a>
                            <a onclick="demo(this,1)">辣度</a>
                        </div>
                    </div>-->
                    <div class="add-property" id="add">添加屬性</div>
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;">商品單位：</span>
                <div class="form-group">
                    <input type="text" id="units" name="unit" data-toggle="popover" data-placement="right" data-content="商品單位不能超过20个字" data-trigger="focus" maxlength="20" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;"><i class="add-star" style="margin: 5px; color: #00a189;">*</i>起售數：</span>
                <div class="form-group">
                    <input type="number" onkeyup="replace(this);" id="q-number" data-toggle="popover" data-placement="right" data-content="商品起售份数" data-trigger="focus" min="0" name="minSale" class="sure-pwd form-control required" value="" />
                </div>
            </div>
            <div class="name">
                <span style="width: 100px;">商品描述：</span>
                <div class="form-group">
                    <textarea class="form-control " name="des" id="describe" rows="5" maxlength="160" style="width: 470px; height: 120px;"></textarea>
                </div>
            </div>
            <div class="add-submit text-center" style="clear: both">
                <a href="javascript:history.go(-1)" class="btn btn-default" style="color: #6c6666; background: #f2f1f1;outline: none">取消</a>
                <input type="submit" class="btn btn-default" style="background: #00a189; color: white;outline: none" value="保存">
            </div>
        </form>
    </div>
</div>
<!-- 商品分類管理 -->
<div class="myModal" id="myModal3" style="display: none; z-index: 999" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" id="modal-dialog3" role="document" style="width: 500px; height: 370px;">
        <form action="">
            <div class="modal-content">
                <div class="modal-body del-modal class-list-modal" style="clear: both; padding: 20px 20px;">
                    <h4 style="color: #6c6666;">添加分类</h4>
                    <a style="float: right; text-decoration: none; margin-top: -35px; text-align: center; font-size: 20px; color: #6c6666;" onclick="hide()">×</a>
                    <div style="clear: both; margin-top: 20px;">
                        <div class="form-group" style="clear: both; margin-right: 20px; width: 280px;">
                            <input type="text" id="typeName" class="form-control" placeholder="請輸入分類商品名稱" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer class-list-btn" style="border-top: none">
                    <button type="button" class="btn btn-default" style="outline: none; color: #6c6666; border-radius: 5px;" onclick="hide()">取消</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="border-radius: 5px; background: #00a189; outline: none;">
                        <a id="saveBtn" href="javascript:addType();" style="color: #ffffff; text-decoration: none">保存</a>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/iscroll-zoom.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
    //提示信息
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });
    var paramValue = '热,常温,去冰,少冰,特辣,麻辣,中辣,微辣,微微辣,清淡,少盐,无糖,少糖,半糖,多糖,珍珠,椰果,波霸,红豆';
    //添加属性
    var index = 0;
    $('#add').click(
            function() {
                $(".add-list").append(
                        '<div class="property" style="margin-top: 10px;height: 40px;">' + '<input type="text"  id="property' + index
                        + '" name="property" onkeyup="hidebox()"  style="float: left;" class="sure-pwd form-control required" placeholder="例如:口味" onfocus="showproperty(this)" oninput="che" />' + '<input type="text" id="propertyPram' + index
                        + '" name="propertyPram" onfocus="showParam(this);" onkeyup="hideproperty1()"  class="sure-pwd form-control required" style="margin-left: 10px;"  oninput="che" placeholder="例如:少盐,用空格隔开"/>' + '<a onclick="getDel(this);" class="del-box del-btn"></a>' + '</div>');
                index++;

            });
    //添加规格
    $('#addStandard').click(
            function() {
                $(".prepend-standard-show").append(
                        '<div class="standard-list" id="standard-list">'+
                        '<div class="standard-box standard-stan">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>规格</span>'+
                        '<p><input type="text" rel="popover" onfocus="showstandard(this)" data-trigger="focus" onblur="hidepopover()" data-placement="bottom" data-placement="bottom"  maxlength="10" id="standar" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-price">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>价格</span>'+
                        '<p><input type="number" min="0" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-num">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>库存</span>'+
                        '<p><input type="num" class="form-control" data-toggle="popover" data-placement="right" data-content="库存无限请填写-1" data-trigger="focus"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-meal-price">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒价格</span>'+
                        '<p><input type="number" min="0" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="standard-box standard-meal-number">'+
                        '<span><i class="add-star" style="margin: 5px; color: #00a189;">*</i>餐盒数量</span>'+
                        '<p><input type="number" min="0" class="form-control"/></p>'+
                        '</div>'+
                        '<div class="del-standard-list"><a onclick="standardDel(this);" class="del-box del-btn"></a></div>'+
                        '</div>'
                );
                //循环列表信息提示
                $(document).ready(function(){
                    $('[data-toggle="popover"]').popover();
                    /*规格气泡*/
                    $('[rel=popover]').popover({
                        html : true,
                        content: function() {
                            return $('#strandard-message').html();
                        }
                    });
                });
                //规格样式显示
                $(".standard-stan").css("display","block");
            }
    );
    function hidebox() {
        $(".box1-list").hide();
        var message = $('.property-message');
        message.removeClass('active');
    }
    function standardDel(obj) {
        $(obj).parent().parent().remove();
        checkedStandard();
    }
    //检查规格列表个数隐藏规格
    function checkedStandard(){
        var standardfalut=$("div[id='standard-default']").length;//编辑的区域的数量
        var standardList=$("#standard-list").length;//新增的区域的数量
        if((standardfalut+standardList)<=1){
            $(".standard-stan").css("display","none");
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">此栏不可删除！<p></div>');
            return  false;
        }
        return true;
    }
    function getDel(k) {
        $(k).parent().remove();
        hideproperty1();
    }
    function hideParam() {
        hideproperty1();
    }
    document.onclick = function(event) {
        var e = event || window.event;//兼容ie和非ie的event
        var aim = e.srcElement || e.target; //兼容ie和非ie的事件源
        if (e.srcElement) {
            var aim = e.srcElement;
            if (aim.placeholder != '例如:口味') {
                $(".box1-list").hide();
            }
            if (aim.placeholder != '例如:少盐,用空格隔开') {
                if (paramValue.indexOf(aim.innerHTML) == -1) {
                    hideproperty1();
                }
            }
        } else {
            var aim = e.target;
            if (aim.placeholder != '例如:口味') {
                $(".box1-list").hide();
            }
            if (aim.placeholder != '例如:少盐,用空格隔开') {
                if (paramValue.indexOf(aim.innerHTML) == -1) {
                    hideproperty1();
                }
            }
        }
    }
    function showParam(obj) {
        var message = $('.property-message');
        message.addClass('active');
        message.css("position", "absolute");
        message.css("z-index", 100);
        message.css("top", obj.offsetTop + 40);
        message.css("margin", 0);

        var map = {
            "溫度" : "1",
            "冷热" : "2",
            "辣度" : "3",
            "口味" : "4",
            "甜度" : "5",
            "加料" : "6"
        }
        var val = obj.previousSibling.value;
        var data = map[val];
        if (data != null) {
            var box2_list = $('.box2_list' + data);
            box2_list.addClass('active').siblings().removeClass("active");
            $(".message-box2").show();
        }
        hideproperty();
    }

    var curr_click_node;
    function demo(obj, tip) {
        if (tip == 1) {
            curr_click_node.value = obj.innerHTML;

            hideproperty();
        }
        if (tip == 2) {
            var dataVal = curr_click_node.nextSibling.value;
            if (dataVal.indexOf(obj.innerHTML) == -1) {
                curr_click_node.nextSibling.value = curr_click_node.nextSibling.value + ' ' + obj.innerHTML;
            }
        }
        if (tip == 3) {
            curr_click_node.value = obj.innerHTML.trim();
            debugger
        }
    }
    function showstandard(obj){
        curr_click_node = obj;
    }
    function hidepopover(){

    }
    function delImg() {
        $(".upload-img").find("img").css("opacity", 0);
        $(".del-img").css("opacity", 0);

        var input = $("#picfile");
        input.replaceWith(input.val('').clone(true));
        $("#upload-img").html("");
        picAllow = true;
    }

    function showproperty(obj) {
        curr_click_node = obj;
        $(".box1-list").show();
        var message = $('.property-message');
        message.addClass('active');

        message.css("position", "absolute");
        message.css("z-index", 100);
        message.css("top", obj.offsetTop + 40);
        message.css("margin", 0);

        hideproperty1();
    }

    function hideproperty() {
        $(".box1-list").hide();
        //$(".message-box2").show();
    }
    function hideproperty1() {
        $(".message-box2").hide();
        var message = $('.property-message');
        message.removeClass('active');
    }

    function upload() {
        $("#multiform").submit();
    }

    var picAllow = true;
    $(':file').change(function() {
        var file = this.files[0];
        size = file.size;
        if (size > 120000) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">上传的图片不能超过100K.<p></div>');
            picAllow = false;
        } else {
            picAllow = true;
        }
    });

    //表單判斷
    function doSubmit() {

        var data = '';
        var menuTypeArray = [];
        var cid = $('#cid').val();
        var name = $('#name').val();
        var price = $('#price').val();
        var number = $('#number').val();
        var qnumber = $('#q-number').val();
        var type = $('#typeId').children('option:selected').val();

        if (!type) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">请选择商品分类.<p></div>');
            return false;
        }
        if (!name) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">商品名稱不能為空.<p></div>');
            return false;
        }

        if (picAllow == false) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">上传的图片不能超过100K.<p></div>');
            return false;
        }

        if (!price) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">商品價格不能為空.<p></div>');
            return false;

        }
        if (!number) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">商品库存不能為空.<p></div>');
            return false;

        }
        if (!qnumber) {
            pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">起售數不能為空.<p></div>');
            return false;

        }
        var size = $("input[name='property']").length;
        for (var i = 0; i < size; i++) {
            var menuParmType = $($("input[name='property']").eq(i)).val();
            var menuParm = $($("input[name='propertyPram']").eq(i)).val();
            if (menuParm.length == 0 || menuParmType.length == 0) {
                pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">商品属性输入有误.<p></div>');
                return false;
            }
            if (jQuery.inArray(menuParmType, menuTypeArray) > -1) {
                pop.a('<div style="padding: 10px;"><span>提示信息</span><p style="margin: 20px;">商品属性不能重复。<p></div>');
                return false;
            }
            menuTypeArray.push(menuParmType);
            data = data + "##" + menuParmType + "*" + menuParm;
        }
        $('#menuPram').val(data);
        //pop.loading("");
    }
</script>
</body>
</html>